<template>
  <div class="syntax-detail-page">
    <!-- 页面头部 -->
    <PageHeader 
      :title="pageTitle"
      :description="pageDescription"
      :loading="isLoading"
    />
    
    <!-- 主要内容区域 -->
    <main class="main-container" :class="{ 'has-toc': headings.length > 0 }">
      <!-- 加载状态 -->
      <LoadingSpinner v-if="isLoading" />
      
      <!-- 错误状态 -->
      <ErrorMessage 
        v-else-if="error"
        :message="error"
        @retry="loadContent"
      />
      
      <!-- 内容区域 -->
      <div v-else class="content-area">
        <div class="markdown-content" v-html="compiledMarkdown"></div>
      </div>
    </main>
    
    <!-- 目录组件 -->
    <TableOfContents
      :headings="headings"
      :active-heading="activeHeading"
      :toc-collapsed="tocCollapsed"
      :toc-visible="tocVisible"
      @toggle="handleTocToggle"
      @scroll-to="handleScrollToHeading"
    />
    
    <!-- 功能按钮 -->
    <ActionButtons
      :visible="!isLoading"
      :current-theme="currentTheme"
      @toggle-theme="handleThemeToggle"
      @run-code="handleRunCode"
    />
    
    <!-- 回到顶部 -->
    <BackToTop />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useThemeStore } from '../../stores/theme'
import { useMarkdown } from '../../composables/useMarkdown'
import { useTableOfContents } from '../../composables/useTableOfContents'

// 组件导入
import PageHeader from '../../components/PageHeader.vue'
import TableOfContents from '../../components/TableOfContents.vue'
import ActionButtons from '../../components/ActionButtons.vue'
import LoadingSpinner from '../../components/LoadingSpinner.vue'
import ErrorMessage from '../../components/ErrorMessage.vue'
import BackToTop from '../../components/BackToTop.vue'

const route = useRoute()
const themeStore = useThemeStore()

// 使用组合式函数
const {
  markdownContent,
  compiledMarkdown,
  isLoading,
  error,
  loadMarkdown,
  extractHeadings
} = useMarkdown()

const {
  headings,
  activeHeading,
  tocCollapsed,
  tocVisible,
  scrollToHeading,
  toggleToc,
  initToc
} = useTableOfContents()

// 页面状态
const pageTitle = ref('')
const pageDescription = ref('全面掌握Java编程语言的核心语法与最佳实践')

// 计算属性
const currentTheme = computed(() => themeStore.currentTheme)

// 事件处理函数
const handleTocToggle = () => {
  toggleToc()
}

const handleScrollToHeading = (id) => {
  scrollToHeading(id)
}

const handleThemeToggle = () => {
  themeStore.toggleTheme()
}

const handleRunCode = (code, language) => {
  if (language === 'html') {
    runHtmlCode(code)
  }
}

// 运行HTML代码
const runHtmlCode = (htmlCode) => {
  try {
    sessionStorage.setItem('htmlPreviewContent', htmlCode)
    const baseUrl = window.location.origin
    const previewUrl = `${baseUrl}/html-preview`
    const previewWindow = window.open(previewUrl, '_blank')
    
    if (!previewWindow) {
      alert('请允许弹窗以查看HTML预览页面')
    }
  } catch (error) {
    console.error('打开预览页面失败:', error)
    alert('预览功能暂时不可用，请稍后重试')
  }
}

// 加载内容
const loadContent = async () => {
  try {
    const topic = route.params.topic
    const filepath = `/markdown/java-basic/${topic}.md`
    
    const content = await loadMarkdown(filepath)
    
    // 提取页面信息
    const firstLine = content.split('\n')[0]
    pageTitle.value = firstLine.replace(/^#\s*/, '') || 'Java语法基础'
    
    // 初始化目录
    await initToc(content)
    
  } catch (err) {
    console.error('加载内容失败:', err)
  }
}

// 监听路由变化
watch(() => route.params.topic, () => {
  loadContent()
}, { immediate: true })

// 生命周期
onMounted(() => {
  loadContent()
})
</script>

<style scoped>
.syntax-detail-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  padding-top: 80px; /* 为导航栏留出空间 */
}

.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
  transition: margin-left var(--transition-normal);
}

.main-container.has-toc {
  margin-left: 320px; /* 为目录留出空间 */
}

.content-area {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xl);
  margin: var(--space-lg) 0;
  position: relative;
  overflow: hidden;
}

.content-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
}

.markdown-content {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
}

/* Markdown 内容样式 */
.markdown-content :deep(h1),
.markdown-content :deep(h2),
.markdown-content :deep(h3),
.markdown-content :deep(h4),
.markdown-content :deep(h5),
.markdown-content :deep(h6) {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin: var(--space-xl) 0 var(--space-lg);
  line-height: var(--line-height-tight);
}

.markdown-content :deep(h1) {
  font-size: var(--font-size-4xl);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--space-md);
}

.markdown-content :deep(h2) {
  font-size: var(--font-size-3xl);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--space-sm);
}

.markdown-content :deep(h3) {
  font-size: var(--font-size-2xl);
}

.markdown-content :deep(h4) {
  font-size: var(--font-size-xl);
}

.markdown-content :deep(p) {
  margin: var(--space-lg) 0;
}

.markdown-content :deep(blockquote) {
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
}

.markdown-content :deep(blockquote p) {
  margin: 0;
  color: var(--text-secondary);
}

.markdown-content :deep(ul),
.markdown-content :deep(ol) {
  margin: var(--space-lg) 0;
  padding-left: var(--space-xl);
}

.markdown-content :deep(li) {
  margin: var(--space-sm) 0;
  line-height: var(--line-height-relaxed);
}

.markdown-content :deep(code) {
  background: var(--bg-code);
  color: var(--color-accent);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}

.markdown-content :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-xl) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.markdown-content :deep(th),
.markdown-content :deep(td) {
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.markdown-content :deep(th) {
  background: var(--bg-secondary);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.markdown-content :deep(tr:hover) {
  background: var(--color-primary-light);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-container.has-toc {
    margin-left: 0;
  }
  
  .main-container {
    padding: 0 var(--space-md);
  }
}

@media (max-width: 768px) {
  .syntax-detail-page {
    padding-top: 60px;
  }
  
  .main-container {
    padding: 0 var(--space-sm);
  }
  
  .content-area {
    padding: var(--space-lg);
    margin: var(--space-md) 0;
  }
  
  .markdown-content {
    font-size: var(--font-size-md);
  }
  
  .markdown-content :deep(h1) {
    font-size: var(--font-size-3xl);
  }
  
  .markdown-content :deep(h2) {
    font-size: var(--font-size-2xl);
  }
  
  .markdown-content :deep(h3) {
    font-size: var(--font-size-xl);
  }
}

/* 打印样式 */
@media print {
  .syntax-detail-page {
    background: white;
  }
  
  .main-container.has-toc {
    margin-left: 0;
  }
  
  .content-area {
    box-shadow: none;
    padding: var(--space-lg);
  }
  
  .markdown-content :deep(h1),
  .markdown-content :deep(h2),
  .markdown-content :deep(h3) {
    break-after: avoid;
  }
  
  .markdown-content :deep(blockquote) {
    break-inside: avoid;
  }
}

/* 加载和错误状态样式 */
.loading-container,
.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  margin: var(--space-lg) 0;
}

/* 动画 */
.content-area {
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 高对比度支持 */
@media (prefers-contrast: high) {
  .content-area {
    border: 2px solid var(--text-primary);
  }
  
  .markdown-content :deep(blockquote) {
    border-left-width: 6px;
  }
}

/* 减少动画支持 */
@media (prefers-reduced-motion: reduce) {
  .content-area {
    animation: none;
  }
  
  .main-container {
    transition: none;
  }
}
</style> 